<template>
  <div class="detail">
    <van-nav-bar title="漫画详情" left-text="返回" left-arrow @click-left="back" />
    <div class="detail-box">
      <div class="detail-img">
        <img :src="comicDetailData.horizontal_cover" />
        <div class="detail-text">
          <span class="title">{{ comicDetailData.title }}</span>
          <div class="authors">
            <span v-for="(item, index) in comicDetailData.author_name" :key="index">{{ item }}</span>
          </div>
          <div class="types">
            <span v-for="(item, index) in comicDetailData.tags" :key="index">{{ item.name }}</span>
          </div>
          <span class="heatDegree">{{ comicDetailData.interact_value }}人气值</span>
        </div>
      </div>
      <div class="detail-introduction" :style="{ height }">
        <p class="text">{{ comicDetailData.classic_lines }}</p>
        <span class="deployment" @click="deployment">{{ isDeployment ? '收起...' : '展开...' }}</span>
      </div>
      <div class="guardianList">
        <div class="comic-rank">
          <div class="rank-tp">
            <span>{{ comicRankName }}</span>
            <img src="../assets/paiming.png" />
          </div>
          <p>No.{{ comicRankTop }}</p>
        </div>
        <div class="p-rank">
          <h3>
            投喂榜&月票榜前三
            <img src="../assets/shouhu.png" alt />
          </h3>
          <div class="p-box" v-if="comicListData.length !== 0">
            <div class="p-item" v-for="(item, index) in comicListData" :key="index">
              <span>
                <img :src="item.avatar" alt />
              </span>
              <p>{{ item.name }}</p>
            </div>
          </div>
          <div class="p-box" v-else>
            <p class="no-rank">暂无人投榜!</p>
          </div>
        </div>
      </div>
      <div class="series" v-if="comics.length !== 0">
        <h3>不同系列作品</h3>
        <span class="series-item" v-for="(item, index) in comics" :key="index">{{ item.title }}</span>
      </div>
      <div class="series" v-else>
        <h3>不同系列作品</h3>
        <span>暂无更多作品</span>
      </div>
      <div class="chapter" :style="{ height: moreHeight }">
        <h3>全部章节({{ allList.length }}) {{ isfinish === 1 ? "完结" : '连载中' }}</h3>
        <div class="chapter-box">
          <span :class="{ active: comicIndex === index }" class="chapter-item" v-for="(item, index) in allList" :key="index"
            @click="sendcomicId(index, item.id)">{{ index + 1 }}. {{ item.title }}</span>
        </div>
        <div class="more" :style="{ display }" @click="moreChapter">{{ isMore ? '收起' : '更多...' }}</div>
      </div>
    </div>
    <van-goods-action>
      <van-goods-action-icon icon="like" :text="isCollect&&isLogin==1? '取消追漫' : '追漫'" @click="collectComic"
        :color="isCollect&&isLogin==1 ? '#ff3f3f' : '#000'" />
      <van-goods-action-button color="#ff3f3f" :text="`阅读第${comicIndex + 1}话`" @click="seecomic" />
    </van-goods-action>
  </div>
</template>

<script>
import { getcomicDetail, getcomicList, getcomicRanking } from "@/api/api";
export default {
  name: "Detail",
  data() {
    return {
      comicDetailData: [],
      height: "",
      isDeployment: false,
      isfinish: "",
      //系列作品集
      comics: "",
      //判断章节数量是否大于8,大于显示,否者隐藏
      display: "none",
      //月榜前三
      comicListData: [],
      //全部章节
      allList: "",
      //漫画榜单排名
      comicRankName: "",
      comicRankTop: "",
      //获取对应漫画章节下标
      comicIndex: 0,
      //获取对应漫画章节id
      comicChapterId: "",
      //展示更多章节
      moreHeight: "",
      isMore: false,
      //收藏
      isCollect: false,
      //获取漫画id
      comicId: "",
      //是否登录
      isLogin:0
    };
  },
  created() {
   this.isLogin = localStorage.getItem("isLogin");
    //判断是否登录,已登录即可收藏成功,否者需要登录在收藏
    //获取漫画小说的详情内容
    this.comicId = this.$route.query.comicId;
    //判断本地存储是否有这漫画id如有则显示取消追漫,表示收藏成功
    let ids = JSON.parse(localStorage.getItem("ids"));
    if (ids) {
      for (let i = 0; i < ids.length; i++) {
        if (ids[i] == this.comicId) {
          this.isCollect = true;
        }
      }
    }
    //获取本地存储的该漫画对应章节
    let continueTheChapter = JSON.parse(
      localStorage.getItem("continueTheChapter")
    );
    if (continueTheChapter) {
      for (let i = 0; i < continueTheChapter.length; i++) {
        if (continueTheChapter[i].comicId == this.comicId) {
          this.comicIndex = continueTheChapter[i].index - 1;
          break;
        }
      }
    }
    //获取漫画详情
    getcomicDetail(this.comicId)
      .then(res => {
        this.isfinish = res.data.data.is_finish;
        this.comicDetailData = res.data.data;
        this.comics = res.data.data.series_info.comics;
        this.allList = res.data.data.ep_list.reverse();
        this.comicChapterId = this.allList[0].id;
        //本地存储每个漫画章节列表
        localStorage.setItem("allList", JSON.stringify(this.allList));
        if (this.allList.length > 8) {
          this.display = "block";
        }
      })
      .catch(err => {
        console.log(err);
      });
    //获取漫画投喂榜&月票榜前三
    getcomicList(this.comicId)
      .then(res => {
        this.comicListData = res.data.data.entrance.ticket_users;
      })
      .catch(err => {
        console.log(err);
      });
    //获取漫画所在的排行榜
    getcomicRanking()
      .then(res => {
        this.comicRankName = res.data.data.list[0].name;
        this.comicRankTop = res.data.data.list[0].top;
      })
      .catch(err => {
        console.log(err);
      });
  },
  methods: {
    back() {
      let path = this.$route.query.path;
      this.$router.push(path);
    },
    //展开漫画简介
    deployment() {
      this.isDeployment = !this.isDeployment;
      if (this.isDeployment) {
        this.height = "140px";
      } else {
        this.height = "42px";
      }
    },
    //阅读漫画
    seecomic() {
      let path = "/seecomic";
      let fullPath = this.$route.fullPath;
      getcomicDetail(this.comicId)
        .then(res => {
          this.allList = res.data.data.ep_list.reverse();
          this.comicChapterId = this.allList[this.comicIndex].id;
          this.$router.push({
            path,
            query: {
              comicChapterId: this.comicChapterId,
              comicId: this.comicId,
              path: fullPath,
              title: this.comicDetailData.title,
              index: Number(this.comicIndex) + 1
            }
          });
        })
        .catch(err => {
          console.log(err);
        });
    },
    //点击发送漫画章节id
    sendcomicId(index, id) {
      if (this.comicIndex === index) {
        return;
      }
      this.comicIndex = index;
      this.comicChapterId = id;
    },
    //展示更多章节
    moreChapter() {
      if (this.isMore) {
        this.moreHeight = "140px";
      } else {
        this.moreHeight = "auto";
      }
      this.isMore = !this.isMore;
    },
    //收藏漫画
    collectComic() {
      if (this.isLogin == 1) {
        this.isCollect = !this.isCollect;
        let comicId = this.$route.query.comicId;
        let ids = localStorage.getItem("ids");
        if (this.isCollect) {
          if (ids) {
            ids = JSON.parse(ids);
          } else {
            ids = [];
          }
          ids.unshift(comicId);
          localStorage.setItem("ids", JSON.stringify(ids));
        } else {
          ids = JSON.parse(ids);
          for (let i = 0; i < ids.length; i++) {
            if (ids[i] == comicId) {
              ids.splice(i, 1);
              localStorage.setItem("ids", JSON.stringify(ids));
            }
          }
        }
      } else {
        let path = this.$route.fullPath;
        localStorage.setItem("path", JSON.stringify(path));
        this.$router.push("/login");
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.detail {
  ::v-deep .van-nav-bar__content {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #fff;
  }

  ::v-deep .van-nav-bar__title {
    color: #333;
    font-size: 18px;
    font-weight: bold;
  }

  ::v-deep .van-nav-bar__text,
  ::v-deep .van-nav-bar .van-icon {
    color: #777;
    font-size: 14px;
  }

  ::v-deep .van-goods-action-button {
    flex: 3;
  }

  ::v-deep .van-goods-action-icon {
    color: #333;
    flex: 2;
  }

  .detail-box {
    margin-bottom: 50px;

    .detail-img {
      margin-top: 46px;
      width: 100%;
      background: #777;

      img {
        width: 100%;
        vertical-align: bottom;
      }

      position: relative;

      .detail-text {
        width: 100%;
        display: flex;
        flex-direction: column;
        padding: 0 10px;
        box-sizing: border-box;
        position: absolute;
        bottom: 0;
        left: 0;
        color: #fff;
        background: rgba(0, 0, 0, 0.3);

        .title {
          font-size: 18px;
        }

        span {
          font-size: 14px;
          margin-bottom: 5px;
        }

        .authors {
          display: flex;

          span {
            margin-right: 10px;

            &:last-child {
              margin-right: 0;
            }
          }
        }

        .types {
          span {
            display: inline-block;
            padding: 2px 10px;
            height: 20px;
            text-align: center;
            border: 1px solid #f1f1f1;
            margin-bottom: 5px;
            border-radius: 10px;
            margin-right: 5px;

            &:last-child {
              margin-right: 0;
            }
          }
        }
      }
    }
  }

  .guardianList {
    display: flex;
    padding: 0 10px;
    margin-top: 10px;
    justify-content: space-between;

    .comic-rank {
      width: 35%;
      text-align: center;

      .rank-tp {
        margin-top: 15px;
        font-size: 16px;

        img {
          width: 20px;
          vertical-align: bottom;
        }
      }

      p {
        font-size: 30px;
        margin: 20px 0;
      }
    }

    .p-rank {
      h3 {
        font-size: 16px;
        text-align: center;
        letter-spacing: 1px;

        img {
          width: 25px;
          vertical-align: bottom;
        }
      }

      .p-box {
        display: flex;

        .no-rank {
          font-size: 16px;
          flex: 1;
          text-align: center;
        }

        .p-item {
          width: 33%;
          text-align: center;

          p {
            width: 80px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          span {
            display: inline-block;
            width: 40px;
            height: 40px;
            border: 1px solid #777;
            border-radius: 50%;
            margin-right: 10px;
            overflow: hidden;

            img {
              width: 100%;
            }
          }
        }
      }
    }
  }

  .detail-introduction {
    width: 100%;
    height: 42px;
    overflow: hidden;
    transition: height 0.5s;
    position: relative;

    .deployment {
      width: 110px;
      position: absolute;
      bottom: -3px;
      right: 0;
      font-size: 14px;
      background: #fff;
      cursor: pointer;
    }
  }

  .series {
    padding: 10px;

    h3 {
      font-size: 16px;
    }

    .series-item {
      display: inline-block;
      height: 30px;
      padding: 2px 5px;
      background: #57d7f8;
      color: #fff;
      text-align: center;
      line-height: 30px;
      border-radius: 4px;
      margin-right: 3px;
      margin-bottom: 10px;

      &:last-child {
        margin-right: 0;
      }
    }
  }

  .chapter {
    padding: 10px;
    height: 140px;
    overflow: hidden;
    position: relative;

    .more {
      width: 28%;
      height: 30px;
      line-height: 30px;
      border-radius: 4px;
      position: absolute;
      bottom: 8px;
      right: 25px;
      border: 1px solid #aaa;
      background: #fff;
      text-align: center;
    }

    h3 {
      font-size: 16px;
      margin: 0;
    }

    .chapter-box {
      display: flex;
      flex-wrap: wrap;

      .chapter-item {
        display: inline-block;
        padding: 0 5px;
        width: 30%;
        height: 30px;
        border-radius: 4px;
        border: 1px solid #aaa;
        margin-top: 10px;
        line-height: 30px;
        color: #333;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        box-sizing: border-box;
        margin-right: 10px;

        &.active {
          background: #ff3f3f;
          color: #fff;
        }
      }
    }
  }
}
</style>